<template>
	<view class="AppointmentService">
		<headertop title="预约服务" :back1="back1"></headertop>
		<image :src="contentobj.image" class="fengmian" mode=""></image>
		<view class="bottomcontent">
			<view class="cardbox">
				<view class="headerheat">
					<view class="topline">
						<view class="box" style="margin-left: 20rpx;" v-if="contentobj.type==2">
							固
						</view>
						<view class="text">
							{{contentobj.title}}
						</view>
					</view>
					<view class="addressbox">
						<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(40).png" class="icon"
							style="margin-left: 20rpx;" mode=""></image>
						<span>{{contentobj.address}}</span>
					</view>
				</view>
				<view class="bottombox">
					<view class="yajin">
						押金：{{contentobj.deposit}}
					</view>
					<view class="cdf">
						<span>场地费:</span>
						<span
							style="font-weight: bold;font-size: 36rpx;color: #7EBC79;">￥{{!userobj.level?contentobj.price:contentobj.userprice}}
						</span>
						<view class="jiag1" style="margin-left:0rpx;" v-if="userobj.level">
							-会员价
						</view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="titleline">
					<view class="bqt">

					</view>
					<view class="title">
						预约营位时间
					</view>
				</view>
				<view class="shijianbox">
					<view class="sjxz">
						<scroll-view class="scroll-view_H" scroll-x="true" @scroll="scroll">
							<view id="demo1" @click="xz(index)"
								:class="active==index?'scroll-view-item_H fff':'scroll-view-item_H'"
								v-for="(item,index) in datesarr" :key="index">
								<view class="t1">
									{{item.weekday}}
								</view>
								<view class="datetime">
									{{item.month}}.{{item.day}}
								</view>
							</view>
						</scroll-view>
						<view class="boxriqi" @click="openrili">
							<image src="https://39gongli.oss-cn-beijing.aliyuncs.com/static/Frame@2x(12).png" mode="">
							</image>
							<span>选择</span>
						</view>
					</view>
					<scroll-view class="bottomline" scroll-x="true">
						<view class="itembox1" v-for="(item,index) in timelist" @click="camplistfun(item,index)"
							:key="index"
							:style="{'background': yansefun(item,index),'border':active1==index?'2rpx solid #7EBC79':'2rpx solid #C9CDD4'}">
							<view class="t1">
								{{item.title}}
							</view>
							<view class="t2">
								{{item.timestart}}~{{item.timeend}}
							</view>
							<view class="boxline"
								:style="{'background':yansefun2(item,index),'color':yansefun3(item,index)}">
								{{item.yueman==0?'可预约':'已满'}}
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
			<view class="content">
				<view class="titleline">
					<view class="bqt">

					</view>
					<view class="title">
						预约人信息
					</view>
				</view>
				<view class="formsbox">
					<view class="line">
						<view class="lable">
							<span style=" color: #ff0000">*</span>预约人：
						</view>
						<input type="text" v-model="query.username" placeholder="请输入预约人姓名(必填)" />
					</view>
					<view class="line">
						<view class="lable">
							<span style=" color: #ff0000">*</span>联系方式：
						</view>
						<input type="text" v-model="query.telphone" placeholder="请输入手机号码(必填)" />
					</view>
					<view class="line">
						<view class="lable">
							<span style=" color: #ff0000">*</span>成人人数：
						</view>
						<input type="text" v-model="query.usernum" placeholder="请输入成人人数(必填)" />
					</view>
					<view class="line">
						<view class="lable">
							<span style=" color: #ff0000">*</span>儿童人数：
						</view>
						<input type="text" v-model="query.children" placeholder="请输入儿童人数(必填)" />
					</view>
					<view class="line">
						<view class="lable">
							备注：
						</view>
						<input type="text" v-model="query.memo" placeholder="请输入备注" />
					</view>
				</view>
			</view>
			<view class="" style="height: 220rpx;">

			</view>
		</view>
		<up-popup :show="show" mode="bottom">
			<uni-calendar :insert="false" :date="timeobj.datetime" @close="close" ref="calendar" :start-date="startDate"
				:end-date="endDate" @confirm="confirmriqi" />
		</up-popup>
		<view class="fixedbox">
			<view class="lijiyuyuie" @click="gopage()">
				立即预约
			</view>
		</view>
		<userlogin ref="denglu"></userlogin>
	</view>
</template>

<script setup>
	import uniCalendar from '@/uni_modules/uni-calendar/components/uni-calendar/uni-calendar.vue'
	import headertop from '@/components/header.vue'
	import userlogin from '@/components/getuser/getuser.vue'
	import {
		campfile,
		timesj,
		collect
	} from '@/api/Campposition.js'
	import {
		userinfo
	} from '@/api/my.js'
	import {
		onPageScroll,
		onLoad
	} from "@dcloudio/uni-app";
	import {
		reactive,
		ref
	} from 'vue';
	const query = reactive({
		username: '',
		telphone: '',
		memo: '',
		usernum: '',
		datetime: '',
		pid: '',
		children: ''
	})
	const back1 = ref('')
	const denglu = ref(null)
	const active = ref(0)
	const datesarr = ref('')
	const active1 = ref(0)
	const timeobj = ref('')
	const calendar = ref(null)
	const show = ref(false)
	const timelist = ref([])
	const startDate = ref('')
	const endDate = ref('')
	const userobj = ref({})
	const contentobj = ref({})
	const id = ref('')
	onLoad((opt) => {
		getuser()
		timeobj.value = uni.getStorageSync('yuyuesoninfo')
		id.value = opt.id
		init(opt.id)
		getNext30Days(opt.id)
		wx.showShareMenu({
			withShareTicket: true,
			menus: ["shareAppMessage", "shareTimeline"]
		})

	})
	async function getuser() {
		const res = await userinfo()
		if (res.data.code == 1) {
			userobj.value = res.data.data
		}
	}

	function openrili() {
		show.value = true
		console.log('daiakirili');
		calendar.value.open();
	}

	function confirmriqi(e) {
		console.log(e, 'eeeeeeeeeeeeeeeee');
		active.value = datesarr.value.findIndex(item => `${item['year']}-${item['month']}-${item['day']}` == timeobj.value
			.datetime)
		timeobj.value.datetime = e.fulldate
		inittime(contentobj.value.id)
	}

	function close() {
		show.value = false
	}
	// 选择日期
	function xz(index) {
		active.value = index
		timeobj.value.datetime = `${datesarr[index]['year']}-${datesarr[index]['month']}-${datesarr[index]['day']}`
		inittime(id.value)
	}

	// 获取从今天开始的未来30天日期
	function getNext30Days(id) {
		let dates = [];
		let today = new Date();

		for (let i = 0; i < 30; i++) {
			let date = new Date();
			date.setDate(today.getDate() + i);

			let year = date.getFullYear();
			let month = date.getMonth() + 1; // 月份从0开始，需要加1
			let day = date.getDate();

			// 格式化月份和日期，确保两位数字
			month = month < 10 ? '0' + month : month;
			day = day < 10 ? '0' + day : day;

			// 格式化为 YYYY-MM-DD
			let formattedDate = `${year}-${month}-${day}`;

			// 获取星期几
			let weekdays = ['日', '一', '二', '三', '四', '五', '六'];
			let weekday = weekdays[date.getDay()];

			dates.push({
				date: formattedDate,
				day: day,
				month: month,
				year: year,
				weekday: '周' + weekday,
				fullDate: `${year}年${month}月${day}日 星期${weekday}`
			});
		}
		datesarr.value = dates
		active.value = dates.findIndex(item => `${item['year']}-${item['month']}-${item['day']}` == timeobj.value.datetime)
		startDate.value = `${dates[0]['year']}-${dates[0]['month']}-${dates[0]['day']}`
		endDate.value =
			`${dates[dates.length-1]['year']}-${dates[dates.length-1]['month']}-${dates[dates.length-1]['day']}`
		inittime(id)
		console.log(datesarr.value, 'datesarrdatesarrdatesarr');
	}

	function camplistfun(item, index) {
		if (item.yueman == 1) {
			uni.showToast({
				icon: 'none',
				title: '该时间段已约满'
			})
			return
		} else {
			active1.value = index
		}
	}
	async function init(id) {
		const res = await campfile({
			id
		})
		if (res.data.code == 1) {
			contentobj.value = res.data.data
		}
	}
	async function inittime(id) {
		const res = await timesj({
			cid: id,
			date: timeobj.value.datetime
		})
		if (res.data.code == 1) {
			timelist.value = res.data.data.timelist
			var ind = timelist.value.findIndex(item => item.id == timeobj.value.pid)
			if (timelist.value[ind]['yueman'] == 1) {
				active1.value = -1
			} else {
				active1.value = ind
			}
		}
	}
	onPageScroll((e) => {
		if (e.scrollTop > 100) {
			back1.value = 'rgba(0,0,0,0.32)'
		} else {
			back1.value = ''
		}
	})

	function gopage() {
		if (!uni.getStorageSync('token')) {
			denglu.value.DengLu()
			return
		}
		query['datetime'] =
			`${datesarr.value[active.value]['year']}-${datesarr.value[active.value]['month']}-${datesarr.value[active.value]['day']}`
		if (active1.value != -1) {
			query['pid'] = timelist.value[active1.value]['id']
		}
		for (var i in query) {
			if (!query[i]) {
				uni.showToast({
					title: '必须补全预约人信息和选择预约时间',
					icon: 'none'
				})
				return
			}
		}
		if (!(/^1(3|4|5|6|7|8|9)\d{9}$/.test(query.telphone))) { //校验手机号码是否有误
			uni.showToast({
				title: '请填写正确手机号码',
				icon: "none"
			});
			return false;
		}
		uni.setStorageSync('yuyuesoninfo', JSON.stringify(query))
		console.log(id.value, 'id.valueid.valueid.value');
		uni.navigateTo({
			url: '/sub_index/index/yuyueinfo?id=' + id.value
		})

	}

	function yansefun2(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#E9FBE8'
			} else {
				return '#7EBC79'
			}
		} else {
			return '#C9CDD4;'
		}
	}

	function yansefun3(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#7EBC79'
			} else {
				return '#FFFFFF'
			}
		} else {
			return '#4E5969;'
		}
	}


	function yansefun(item, index) {
		if (item.yueman == 0) {
			if (index != active1.value) {
				return '#fff'
			} else {
				return '#F6FFF2'
			}
		} else {
			return '#F2F3F5;'
		}
	}
</script>

<style lang="scss">
	.jiag1 {
		margin-left: 0px;
		display: inline-block;
	}

	.AppointmentService {
		width: 100%;
		overflow: hidden;
		position: relative;

		.fixedbox {
			width: 100%;
			overflow: hidden;
			background: #FFFFFF;
			height: 184rpx;
			position: fixed;
			bottom: 0%;
			box-shadow: 0rpx -4rpx 4rpx 0rpx rgba(0, 0, 0, 0.08);
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			z-index: 999;

			.lijiyuyuie {
				width: 686rpx;
				height: 88rpx;
				background: #7EBC79;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				font-family: PingFang SC, PingFang SC;
				font-weight: 400;
				font-size: 30rpx;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin: auto;
				margin-top: 22rpx;
			}
		}

		.fff {
			background: #7EBC79;
			border-radius: 6rpx 6rpx 6rpx 6rpx;
			color: #FFFFFF !important;
		}

		.fengmian {
			width: 750rpx;
			height: 664rpx;
			position: absolute;
			z-index: -1;
		}

		.bottomcontent {
			width: 100%;
			background: #F7F8FA;
			border-radius: 36rpx 36rpx 0rpx 0rpx;
			margin-top: 630rpx;
			overflow: hidden;
			z-index: 999;

			.cardbox {
				width: 686rpx;
				background: #FFFFFF;
				box-shadow: 0rpx 4rpx 4rpx 0rpx #DCDCDC;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				overflow: hidden;
				margin: auto;
				margin-top: 32rpx;

				.bottombox {
					width: 100%;
					height: 88rpx;
					display: flex;
					align-items: center;

					.yajin {
						font-weight: 400;
						font-size: 28rpx;
						color: #86909C;
						margin-left: 164rpx;
					}

					.cdf {
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						color: #1D2129;
						margin-left: 36rpx;
					}
				}

				.headerheat {
					width: 664rpx;
					margin: auto;
					border-bottom: 1rpx solid #F2F3F5;

					.addressbox {
						width: 100%;
						display: flex;
						align-items: center;
						font-weight: 400;
						font-size: 24rpx;
						color: #4E5969;
						margin-top: 20rpx;
						margin-bottom: 20rpx;

						.icon {
							width: 32rpx;
							height: 32rpx;
						}
					}

					.topline {
						display: flex;
						align-items: center;
						margin-top: 32rpx;

						.box {
							width: 56rpx;
							height: 40rpx;
							background: #7EBC79;
							border-radius: 4rpx 20rpx 4rpx 20rpx;
							line-height: 40rpx;
							font-family: PingFang SC, PingFang SC;
							font-weight: 500;
							font-size: 32rpx;
							color: #FFFFFF;
							margin-right: 12rpx;
							text-align: center;
						}

						.text {
							font-weight: bold;
							font-size: 44rpx;
							color: #1D2129;
						}
					}
				}
			}

			.content {
				width: 686rpx;
				overflow: hidden;
				margin: auto;

				.formsbox {
					width: 686rpx;
					background: #FFFFFF;
					box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 16rpx 16rpx 16rpx 16rpx;
					margin-top: 28rpx;
					overflow: hidden;

					.line {
						width: 630rpx;
						height: 88rpx;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
						border-bottom: 2rpx solid #F7F8FA;
						display: flex;
						align-items: center;
						font-family: PingFang SC, PingFang SC;
						font-weight: 400;
						font-size: 28rpx;
						margin: auto;

						.lable {
							width: 160rpx;
						}

						input {
							margin-left: 48rpx;
						}
					}

				}

				.shijianbox {
					overflow: hidden;
					margin-top: 30rpx;
					box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 24rpx 24rpx 24rpx 24rpx;
					background: #FFFFFF;

					.bottomline {
						width: 634rpx;
						margin: auto;
						white-space: nowrap;
						margin-top: 40rpx;
						margin-bottom: 28rpx;

						.itembox1 {
							width: 200rpx;
							height: 150rpx;
							background: #F2F3F5;
							border-radius: 16rpx 16rpx 16rpx 16rpx;
							border: 2rpx solid #C9CDD4;
							font-weight: 400;
							font-size: 28rpx;
							color: #4E5969;
							display: inline-block;
							overflow: hidden;
							margin-right: 24rpx;
							overflow: hidden;

							.t1 {
								width: 100%;
								text-align: center;
								margin-top: 16rpx;
							}

							.t2 {
								width: 100%;
								text-align: center;
								margin-top: 8rpx;
							}

							.boxline {
								width: 100%;
								height: 46rpx;
								text-align: center;
								line-height: 46rpx;
								font-weight: 400;
								font-size: 24rpx;
								color: #4E5969;
								background: #E5E6EB;
								margin-top: 10rpx;
							}
						}
					}

					.sjxz {
						width: 100%;
						overflow: hidden;
						display: flex;

						.boxriqi {
							display: flex;
							width: 120rpx;
							flex-direction: column;
							align-items: center;
							box-shadow: -8px 0 8px -6px #C3C3C2;
							font-family: PingFang SC, PingFang SC;
							font-weight: 400;
							font-size: 20rpx;
							color: #7EBC79;
							margin-top: 32rpx;

							image {
								width: 52rpx;
								height: 52rpx;
							}
						}

						.scroll-view_H {
							white-space: nowrap;
							width: 580rpx;
							margin-left: 28rpx;
							margin-top: 32rpx;

							.scroll-view-item_H {
								width: 72rpx;
								height: 94rpx;
								text-align: center;
								font-size: 36rpx;
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #4E5969;
								margin-right: 36rpx;
								display: inline-block;

								.t1 {
									font-size: 28rpx;
									width: 100%;
									text-align: center;
									margin-top: 8rpx;
								}

								.datetime {
									font-weight: 400;
									font-size: 24rpx;
									width: 100%;
									text-align: center;
									margin-top: 6rpx;
								}
							}
						}


					}

				}

				.titleline {
					display: flex;
					align-items: center;
					margin-top: 34rpx;

					.bqt {
						width: 6rpx;
						height: 36rpx;
						background: #7EBC79;
						border-radius: 0rpx 24rpx 24rpx 0rpx;
						margin-right: 8rpx;
					}

					.title {
						font-family: PingFang SC, PingFang SC;
						font-weight: bold;
						font-size: 32rpx;
						color: #1D2129;
					}
				}

				.contentimages .imagebox:nth-child(3n) {
					margin-right: 0 !important;
				}

				.contentimages {
					width: 100%;
					margin-top: 26rpx;
					overflow: hidden;
					display: flex;
					flex-wrap: wrap;

					.imagebox {
						width: 210rpx;
						overflow: hidden;
						background: #FFFFFF;
						box-shadow: 0rpx 4rpx 4rpx 0rpx rgba(0, 0, 0, 0.13);
						border-radius: 12rpx;
						position: relative;
						margin-right: 28rpx;
						margin-bottom: 24rpx;

						.leftpobox {
							position: absolute;
							right: 0;
							top: 0;
							width: 48rpx;
							height: 32rpx;
							display: flex;
							justify-content: center;
							align-items: center;
							font-size: 24rpx;
							z-index: 999;
							color: #FFFFFF;

							.leftpoboxback {
								width: 48rpx;
								height: 32rpx;
								position: absolute;
								z-index: -1;
							}

							image {
								width: 48rpx;
								height: 32rpx;
								z-index: 99999;
							}
						}

						.imgfm {
							width: 210rpx;
							height: 186rpx;
						}

						.titlebox {
							width: 100%;
							height: 60rpx;
							display: flex;
							align-items: center;

							.xuank {
								width: 28rpx;
								height: 28rpx;
								border-radius: 4rpx 4rpx 4rpx 4rpx;
								border: 2rpx solid #C9CDD4;
								margin-left: 10rpx;
							}

							.title {
								font-family: PingFang SC, PingFang SC;
								font-weight: 400;
								font-size: 28rpx;
								color: #1D2129;
								margin-left: 32rpx;
							}

						}
					}
				}

			}
		}
	}
</style>